<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>单选按钮实现性别的互斥</title>
</head>
<body>
<div id="change" class="change">

    <form action="" method="get">
        <!--name 属性实现 单选按钮的分组，同一组的单选按钮互斥-->
        <!--value 属性实现设置提交到服务器的值-->
        <label for="male"><input type="radio" name="gender" id="male" value="male"> 男</label>
        <label for="female"><input type="radio" name="gender" id="female" value="female">女</label>

        <br>

        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </form>
</div>

<script>
    let element_reset = document.querySelector("input[type='reset']");
    console.log(element_reset);

    let element_male = document.querySelector("input[id='male']");
    let element_female = document.querySelector("input[id='female']");

    // console.log(element_male);
    // console.log(element_female);

    element_reset.addEventListener(
        "click",
        function () {
            element_male.checked = false
            element_female.checked = false
        }
    )
</script>
</body>
</html>